<template>
	<div class="AssociatedVariable-container">
		<el-dialog title="关联变量" :visible.sync="showVariableDialog" width="874px" :before-close="cancel" custom-class="associated-variable-dialog" append-to-body>
			<div class="customer-message">
				<span class="customer-text">客户信息</span>
				<p class="customer-line"></p>
			</div>
			<div class="role-box">
				<span class="role-text">角色：</span>
				<el-tag v-for="item in roleData" :key="item.id" class="role-tag" :class="{ activeTag: activeTag === item.id }" @click="checkRole(item.id)">{{ item.name }}</el-tag>
			</div>
			<div class="table-contents">
				<el-table :data="tableData" border style="width: 100%" empty-text="暂无数据" highlight-current-row @row-click="itemsRowClick">
					<!-- @row-click="itemsRowClick"   先注释点击table表格勾选一行数据 导致 :disabled="showDetail" 跳转详情无效果 -->
					<el-table-column label width="35">
						<template slot-scope="scope">
							<el-radio :label="scope.row.id" v-model="selectedId" :disabled="showDetail">&nbsp;</el-radio>
						</template>
					</el-table-column>
					<el-table-column label="变量名" prop="variableName" align="center"> </el-table-column>
					<el-table-column label="初始化方式" prop="initializationMode" align="center"> </el-table-column>
					<el-table-column label="变量类型" prop="variableType" align="center"> </el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer" v-if="!showDetail">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="ok">确 定</el-button>
			</span>
			<p class="error-info" v-show="showErrorTips">* {{ errorInfo }}</p>
			<div class="page-contents">
				<PageSize :pages="pageData" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
import PageSize from '@/views/components/PageSize.vue';
import { mapState, mapMutations } from 'vuex';
import { getAllRole, getVariablesByDisabled } from '@/api/api.js';

export default {
	name: '',
	components: { PageSize },
	props: {
		showVariableDialog: {
			type: Boolean,
			default: () => true,
			required: true
		},
		variableSelect: {
			type: [Number],
			default: () => -1
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		return {
			errorInfo: '请选择一项关联变量',
			selectedId: '',
			currentlySelectedObject: {},
			showErrorTips: false,
			tableData: [],
			pageData: {
				page: 1,
				pageSize: 10,
				total: 0
			},
			roleData: [],
			activeTag: 1,
			scenId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.params.scenId,
			businessData: []
		};
	},
	watch: {},
	mounted() {
		this.initAllRole();
	},
	computed: {
		...mapState({
			bizflowId: state => state.associatedVariable.bizflowId,
			variablePages: state => state.associatedVariable.pages,
			variableList: state => state.associatedVariable.variableList
		})
	},
	methods: {
		...mapMutations('associatedVariable', ['SET_BIZFLOW_ID', 'SET_VARIABLE_PAGES', 'SET_VARIABLE_LIST']),
		// 确定关联的变量
		ok() {
			let { selectedId, currentlySelectedObject, tableData, activeTag } = this;
			if (!selectedId) {
				this.showErrorTips = true;
				return;
			}
			// 为空赋值
			if (!currentlySelectedObject.id) {
				currentlySelectedObject = tableData.find(currentValue => {
					if (currentValue.id === selectedId) {
						return true;
					}
				});
			}
			if (currentlySelectedObject === undefined) {
				this.showErrorTips = true;
				return;
			}
			this.showErrorTips = false;
			console.log(selectedId, currentlySelectedObject, 'ok确认', activeTag);
			if (currentlySelectedObject) {
				this.$emit('ok', selectedId, currentlySelectedObject);
			}
		},
		// 勾选的项
		itemsRowClick(data) {
			this.selectedId = data.id;
			this.currentlySelectedObject = data;
			console.log('itemsRowClick', data);
		},
		cancel() {
			// this.selectedId = '';
			this.tableData = [];
			// this.$emit('update:showVariableDialog', false);
			this.$emit('cancel', this.selectedId);
		},
		// 分页事件
		changePageSize(val) {
			this.pageData.pageSzie = val;
			this.initcustomerData(this.activeTag);
		},
		changeCurrentPage(val) {
			this.pageData.page = val;
			this.initcustomerData(this.activeTag);
		},
		// 初始化所有角色
		initAllRole() {
			getAllRole(this.scenId)
				.then(res => {
					this.roleData = res.data.data;
					this.activeTag = res.data.data[0]?.id;
					if (this.activeTag) {
						this.initcustomerData(this.activeTag);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 客户信息变量配置初始化
		initcustomerData(id) {
			let data = {
				scenId: this.scenId,
				roleId: id || this.activeTag,
				page: this.pageData.page,
				pageSize: this.pageData.pageSize,
				isDisabled: false
			};
			getVariablesByDisabled(data)
				.then(res => {
					console.log(res.data.data, 'initcustomerData');
					this.tableData = res.data.data.data.map(item => {
						return {
							id: item.id,
							variableName: item.name,
							roleId: item.roleId,
							initializationMode: item.initMode === 'user-data' ? '随路数据' : item.initMode === 'api-data' ? 'API获取' : '非初始化',
							variableType: item.type === 'text' ? '文本/字符串' : item.type === 'numeric' ? '数值' : '文本/字符串',
							dataMasking: item.dataMasking ? item.dataMasking : '',
							params: item.params,
							url: item.url,
							method: item.method,
							linkedKey: item.linkedKey,
							isDefault: item.isDefault
						};
					});
					this.pageData.total = res.data.data.count;
					this.selectedId = this.variableSelect;
					console.log(this.tableData, '关联客户信息变量列表');
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		checkRole(id) {
			this.activeTag = id;
			this.selectedId = '';
			this.currentlySelectedObject = {};
			// console.warn(id, 'activeTag');
			this.initcustomerData(this.activeTag);
		}
	}
};
</script>

<style scoped lang="less">
.error-info {
	color: #ef5753;
}
.page-contents {
	padding-top: 10px;
	padding-bottom: 32px;
}
.associated-variable-dialog {
	.customer-message {
		margin-top: 16px;
		.customer-text {
			// width: 56px;
			// height: 13px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6384fe;
		}
		.customer-line {
			width: 56px;
			height: 2px;
			background: #6384fe;
			// display: inline-block;
		}
	}
	.role-box {
		margin-top: 24px;
		.role-text {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		.role-tag {
			height: 32px;
			background: #ffffff;
			border-radius: 4px;
			color: #6784f2;
			margin: 0 7px;
			cursor: pointer;
		}
		.activeTag {
			height: 32px;
			border-radius: 4px;
			background-color: #e7f2fe;
			color: #5374f2;
			margin: 0 7px;
			cursor: pointer;
		}
	}
}
</style>
<style lang="less">
.table-contents {
	margin-top: 25px;
	.el-table thead {
		color: #676a6c;
		tr {
			th {
				background-color: #f8f8f9;
			}
		}
	}
	.el-tabs__header {
		margin: 0;
		padding: 10px;
	}
}
.associated-variable-dialog .el-dialog__body {
	border-top: 0.015625rem solid #ccc;
	border-bottom: 0.015625rem solid #ccc;
	padding: 0 20px;
}
</style>
